.q{
    /* 横向排列，自适应摆放 */
    display: flex;
    flex-wrap: wrap;
}

.mt-1{
    display: flex;
    flex-wrap: wrap;
 }
 .pd-2{
   padding: 2px 2px;
 }
 
 .box {
    width: 45px;
    height: 20px;
    background-color: #007BFF;
    /* 设置圆角，这里假设近似值为 2px，你可按需调整 */
    border-radius: 20px;
}
.box-1{
    height: 25px;
    width: 60px;
    // background-color: #007BFF;
    /* 设置圆角，这里假设近似值为 2px，你可按需调整 */
    border-radius: 20px;
}
.mt-4 {
  /* 横向排列，自适应摆放 */
  display: flex;
  flex-wrap: wrap;
}
.pd-5 {
  padding: 5px 15px;
}
.pr-5{
  padding-right: 5px;
}
.pt-5{
  padding-top: 5px;
}
.pb-5{
  padding-bottom: 5px;
}
.ai-c {
  /* 上下居中 */
  align-items: center;
}
.jc-c{
    // 内容居中
  justify-content: center;
}
.wt50{
  width: 50%;
}
.wh100{
  width: 50%;
  height: 100%;
  // background-color: #007BFF;
}